<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    form {
      width: 500px;
      padding: 30px;
      border: 5px solid pink;
      border-radius: 15px;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
    }

    form > label {
      height: 50px;
      position: relative;
    }

    form > label > span {
      color: red;
      position: absolute;
      left: 20px;
      bottom: 5px;

      display: none;
    }
  </style>
</head>
<body>

  <form>
    <label>
      <!-- 6-12位 字母数字下划线  不能以数字开头 -->
      用户名: <input autocomplete="off" type="text" class="name" name="username">
      <span class="err">请按照规则填写用户名</span>
    </label>
    <label>
      密码: <input autocomplete="off" type="text" name="password">
      <span>请按照规则填写密码</span>
    </label>
    <label>
      手机号: <input autocomplete="off" type="text" name="phone">
      <span>请按照规则填写手机号</span>
    </label>
    <button>注册</button>
  </form>

  <script>
      // var inp = document.querySelector('.name'); //获取用户名这个表单元素 
      // var err =  document.querySelector('.err'); 
      // // 获取用户输入的内容 
      // // var value = inp.value;
      // // 焦点移出后判定是否满足要求
      // // blur 
      // var reg = /^[a-zA-Z_]\w{5,11}$/;
      // inp.onblur = function(){
      //     // alert(this.value)
      //     if(reg.test(this.value)){
      //         err.style.display = 'none';
      //     }
      //     else{
      //       err.style.display = 'block';
      //     }
      // }


      // var pwd = document.getElementsByName('password')[0]; //获取用户名这个表单元素 
      // var err =  document.querySelectorAll('span')[1]; 
      // // console.log(err);
      // // 获取用户输入的内容 
      // // var value = inp.value;
      // // 焦点移出后判定是否满足要求
      // // blur 
      // var reg = /^\w{6,12}$/;
      // pwd.onblur = function(){
      //     alert(this.value)
      //     if(reg.test(this.value)){
      //         err.style.display = 'none';
      //     }
      //     else{
      //       err.style.display = 'block';
      //     }
      // }



      // var phone = document.getElementsByName('phone')[0]; //获取用户名这个表单元素 
      // var err =  document.querySelectorAll('span')[2]; 
  
      // var reg = /^1[3-9]\d{9}$/;
      // phone.onblur = function(){
      //     alert(this.value)
      //     if(reg.test(this.value)){
      //         err.style.display = 'none';
      //     }
      //     else{
      //       err.style.display = 'block';
      //     }
      // }
     

      // 上面是原生的写法  重复代码很多  接下来优化  
      // 变化的是正则  其它不变   
      

      //获取所有的 input 元素 
      var inps = document.querySelectorAll('form input');


      // /^[a-zA-Z_]\w{5,11}$/
      // /^\w{6,12}$/
      // /^1[3-9]\d{9}$/

      var regs = {
        'username':/^[a-zA-Z_]\w{5,11}$/,
        'password':/^\w{6,12}$/,
        'phone':/^1[3-9]\d{9}$/,
      }

      //遍历 每个元素绑定鼠标失去焦点事件   
      // 每个事件执行相同的方法  

      inps.forEach(function(item){
          item.onblur = checkform;
      });


      function checkform(){
          // console.log(this.value)
          var text = this.value; //每个表单输入的内容
          // 获取元素的name 属性   
          // console.log(this.name)
          // 根据name属性对应的值 拿到对应的正则表达式  
          // 因为 regs 的键就是 name属性对应的值
          var reg = regs[this.name];
          var err = this.nextElementSibling;
          if(reg.test(text)){
              // 如果满足要求 
              // 输入框同级的下一个元素  隐藏 
              err.style.display = 'none';
          }else{
            // 如果满足要求 
              // 输入框同级的下一个元素  显示
              err.style.display = 'block';
          }

      }


  </script>
</body>

</html>
